<template>
  <el-card>我的钱包</el-card>
  <el-card class="cashTop">
    <div class="tittleWrapper">
      <div>钱包余额</div>
      <div>
        <el-popover placement="right" :width="300" trigger="hover">
          <template #reference>
            <el-icon>
              <Warning/>
            </el-icon>
          </template>
          <el-card style="background-color: deeppink;font-size: 12px">
            <p>1.卖家销售所得及买家退款都将自动转入钱包余额；</p>
            <p>2.已售视频课，销售所得将即时转入到您的钱包余额；</p>
            <p>3.已售线下课，销售所得将在用户确认结课或满足自动确认条件后，自动转入钱包余额；</p>
            <p>4.其中，加入消费保障计划的课程将在结课后的7天内自动确认，未加入消费保障计划的课程将在课程开始后一天自动确认；</p>
            <p> 5.当前钱包余额仅支持支付卖家退款手续费和提现功能。</p>
            <p>6.钱包余额不包含冻结金额。</p>
          </el-card>
        </el-popover>
      </div>


    </div>
    <div class="balance">
      <div>￥0.00</div>
    </div>
    <el-button class="getMoney">
      <span>提现</span>
    </el-button>
    <div class="bottom">
      <div class="bottomTip">
        <el-popover placement="top" :width="250" trigger="hover">
          <template #reference>
            <el-icon size="large">
              <ChatDotSquare/>
            </el-icon>
          </template>
          <div style="width: 200px;font-size: 12px;text-align: center">
            <p>打开app扫码</p>
            <div>联系客服</div>
            <div style="display: flex;align-content: center;justify-content: center">
              <img style="width: 50%" src="@/assets/images/kf.png" alt="扫码添加客服微信">
            </div>

          </div>
        </el-popover>
        <span>联系客服</span>
      </div>
    </div>
  </el-card>
  <el-card class="cashBottom">
    <el-row class="bottomTop">
      <div class="tittle">
        <el-popover placement="bottom" trigger="hover">
          <template #reference>
            <el-row>
              <h4>钱包明细</h4>
              <el-icon size="large" style="margin-left: 10px">
                <warning/>
              </el-icon>
            </el-row>
          </template>
          <el-card style="font-size: 12px;background-color: deeppink;width: auto">
            <p>1.钱包明细包含收入和支出两项；</p>
            <p>2.支出项当前为用户提现明细、支付退款手续费明细；</p>
            <p> 3.收入项包含卖家销售所得、买家退款所得、副业佣金。</p>
          </el-card>
        </el-popover>
      </div>
    </el-row>
    <div class="dataBottom">
      <p>暂无数据</p>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {Warning, ChatDotSquare} from "@element-plus/icons-vue";
</script>

<style lang="less" scoped>
.cashTop {
  background: #fff;
  border-radius: 4px;
  margin-top: 10px;
  padding: 30px;

  .tittleWrapper {
    display: flex;
    font-size: 16px;
    color: #111;
    text-align: center;
    position: relative;
    margin: 32px 0;
    justify-content: center;
    align-content: center;
  }

  .balance {
    font-size: 26px;
    color: #111;
    text-align: center;
    padding: 60px 0 51px;
    font-weight: 700;
  }

  .getMoney {
    width: 180px;
    height: 50px;
    margin: 0 auto;
    display: block;
    color: #fff;
    background-color: #fc9bc2;
    border-color: #fc9bc2;
  }

  .bottom {
    text-align: center;
    padding: 111px 0 16px;

    .bottomTip {
      color: #7d8090;
      font-size: 14px;
    }
  }
}

.cashBottom {
  margin: 10px 0;
  padding: 15px;

  .bottomTop {
    border-bottom: 1px solid #e3e3e3;
  }

  .dataBottom {
    text-align: center;
    padding-top: 30px;
  }
}
</style>
